<!-- 添加/编辑 收件地址-->
<template>
	<div class="page-common">
		<nav-bar :back="1" :title="'发布难题咨询'"></nav-bar>
		<div class="add-address">
			<van-form @submit="onSubmit">
				<div class="type-picker form-item" @click="$router.push('/selproblemtype')">
				<!-- <div class="type-picker form-item" @click="pickerSwitch"> -->
					<van-row type="flex" justify="center">
						<van-col span="22">
							<van-field v-model="proInfo.ClassName" name="ClassName" label="您的难题分类："
								placeholder="请选择" readonly class="limit-one-line" input-align="right">
							</van-field>
							<van-field v-model="proInfo.ClassId" name="ClassId" label="您的难题分类："
								placeholder="请选择" readonly class="limit-one-line" input-align="right" style="display:none">
							</van-field>
						</van-col>
						<van-col span="2">
							<van-icon name="arrow" class="arrowsRight"/>
						</van-col>
					</van-row>
				</div>
				<div class="form-item">
					<van-field v-model="proInfo.Title" name="Title" label="您的难题咨询是...."
						placeholder="" class="limit-one-line" input-align="right">
					</van-field>
				</div>
				<div class="inputcontent" ref="inputcontent">
					<van-field v-model="proInfo.Remark" name="Remark" label-width="0" placeholder="请输入具体内容...."
						:rules="[{ required: true, message: '' }]" :autosize="autosize" maxlength="500" type="textarea"
						show-word-limit>
					</van-field>
				</div>
				<div class="addAddress-btn">
					<button class="btn main-btn" round block type="info" native-type="submit">
						确认发布
					</button>
				</div>
			</van-form>
		</div>
		<van-picker
			class="selectModal"
			title="难题分类"
      show-toolbar
			:columns="columns"
			@confirm="onConfirm"
			@cancel="onCancel"
			v-show="showPicker"
		/>
	</div>
</template>

<script>
	import {
		Toast,
		Dialog,
		Picker
	} from 'vant'

	import NavBar from '../../components/NavBar.vue'

	import {
		problem_api
	} from '../../api/index.js'

	export default {
		name: 'addressedit',
		components: {
			NavBar,
		},
		data() {
			return {
				showPicker: false,
				name_rules: [{
					required: true,
					message: '请填写您的姓名',
				}],
				age_rules: [{
					validator: (value) => {
						return value>0
					},
					message: '请输入正确的年龄',
				}],
				province_rules: [{
					required: true,
					message: '请选择性别',
				}],
				address: {},
				is_alter: false,
				columns: [],
				proInfo: {},
				autosize: {
					maxHeight: 100,
					minHeight: 100,
				},
			}
		},
		mounted() {
			this.autosize = {
				maxHeight: this.$refs.inputcontent.offsetWidth - 150,
				minHeight: this.$refs.inputcontent.offsetWidth - 150,
			}
			// this.getTypeList()
		},
		activated() {
			this.proInfo.ClassId = this.$route.params.id;
			if (this.proInfo.ClassId != undefined) {
				this.proInfo.ClassName = this.columns.filter(item => {
					return item.Id == this.proInfo.ClassId;
				})[0].text;
			}
			this.getTypeList()
		},
		methods: {
			rollback() {
				this.$router.back(-1)
			},
			pickerSwitch() {
				this.showPicker = !this.showPicker
			},
			onConfirm(value, index) {
				console.log(value, index);
				this.proInfo.ClassId = value.Id;
				this.proInfo.ClassName = value.text;
				this.showPicker = false;
			},
			onCancel() {
				this.showPicker = false;
			},
			//提交表单
			onSubmit(values) {
				console.log('submit', values)
				let data = {
					ClassId: values.ClassId,
					Remark: values.Remark,
					Title: values.Title,
				}
				problem_api.saveProblemConsultInfo(data, (res) => {
					console.log(res)
					Toast('保存成功')
					setTimeout(() => {
						this.rollback()
					}, 1000)
				})
			},
			getTypeList() {
				problem_api.getproblemconsultclasslist((res) => {
					console.log('getAddressList', res)
					this.columns = res.map((item) => {
						return {
							text: item.ClassName,
							Id: item.Id,
						}
					});
					// console.log(this.proInfo.ClassId)
					// if (this.proInfo.ClassId != undefined) {
					// 	this.proInfo.ClassName = res.filter(item => {
					// 		return item.Id == this.proInfo.ClassId;
					// 	})[0].ClassName;
					// }
				})
			}
		},
		computed: {
		},
	}
</script>

<style>
	.van-field__label {
		width: 2rem;
		margin: 0;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #a3a3a3;
	}

	/* 提示框 */
	.van-dialog__header {
		padding-top: 0.78rem;
		font-weight: 600;
		font-size: 0.32rem;
		line-height: 0.4rem;
		text-align: center;
	}

	.van-dialog__message {
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.4rem;
		padding: 0.48rem 0.4rem 0.6rem;
	}
</style>

<style scoped>
	.page-common {
		width: 100%;
		height: 100%;
		padding: 1rem 0.28rem;
		background-color: #fff;
	}

	.add-address {
		min-height: calc(100vh - 0.88rem);
	}

	.provinces-picker {
		position: relative;
	}

	.arrowsRight {
		/* position: absolute; */
		/* width: 0.14rem;
		height: 0.28rem; */
		/* top: calc(50% - 0.14rem);
		right: 0.3rem; */
		font-size: 0.28rem;
		margin-top:0.49rem;
		color: #a3a3a3;
	}
	.addAddress-btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
	}
	.btn {
		margin-bottom: 0.3rem;
	}
	.form-item .van-cell{
		padding: 0.40rem 0.16rem 0.08rem;
	}
	.form-item{
		position: relative;
	}
	.form-item::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 8px;
    bottom: 0;
    left: 8px;
    border-bottom: 1px solid #E0E0E0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
	}
	.selectModal {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
	.inputcontent {
		margin: 0.34rem 8px 0;
		border: 1px dashed #e0e0e0;
	}
</style>
